<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-07-01 01:02:52
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 消费记录表格
-->
<template>
  <div class="table-consume-box">
    <div class="table-containe">
      <BaseTable :columns="column" :table-data="tableData">
        <template #type="{ row }">
          {{ column[0].formatter(row.type) }}
        </template>
        <template #employ_type="{ row }">
          {{ column[1].formatter(row.employ_type) }}
        </template>
      </BaseTable>
    </div>
    <Pagination :pagination-data="pageData" :page-sizes="[5, 10, 15, 20]" @paginationFun="changePage" />
  </div>
</template>

<script>
import { getPropertyLogApi } from '@/api/user'
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'
export default {
  name: 'AccountTable',
  components: {
    BaseTable,
    Pagination
  },
  props: {
    contralData: {
      type: Object,
      default: function () {
        return {
          type: '',
          time: ''
        }
      }
    }
  },
  data() {
    return {
      column: [
        {
          prop: 'type',
          label: '所属类型',
          formatter: function (data) {
            if (data === 'video_render_duration') {
              return '视频渲染时长'
            } else if (data === 'data_traffic_size') {
              return '流量'
            } else if (data === 'disk_size') {
              return '磁盘空间'
            } else if (data === 'cash_price') {
              return '余额'
            } else {
              return '--'
            }
          }
        },
        {
          prop: 'employ_type',
          label: '分类',
          formatter: function (data) {
            if (data === 0) {
              return '支出'
            } else if (data === 1) {
              return '收入'
            } else {
              return '--'
            }
          }
        },
        {
          prop: 'create_datetime',
          label: '创建时间'
        },
        {
          prop: 'val',
          label: '金额'
        }
      ],
      tableData: [
        // {
        //   "id": 86,
        //   "users_uniqueid": "n6mbo00lqb0d0djwg4dx5bnuc3npmgqr",
        //   "type": "video_render_duration",//类型: video_render_duration=视频渲染时长(单位秒) data_traffic_size=流量(单位字节) disk_size=磁盘空间(单位字节) cash_price=余额(单位分)
        //   "val": "9",//对应载荷值
        //   "create_datetime": "2024-06-25 22:31:44",//创建时间
        //   "update_datetime": "2024-06-25 22:31:44",
        //   "employ_type": 0//使用类型:0=支出,1=收入
        // }
      ],
      pageData: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  computed: {},
  watch: {
    contralData: {
      handler() {
        this.getTableData()
      },
      immediate: true,
      deep: true
    }
  },
  created() {

  },
  methods: {
    chooseFun(item) {
      this.chooseTabs = JSON.parse(JSON.stringify(item))
    },
    getTableData() {
      let st = ''
      let et = ''
      if (this.contralData.time !== '' && this.contralData.time.length > 0) {
        st = this.contralData.time[0]
        et = this.contralData.time[1]
      }
      const data = {
        start_datetime: st,
        end_datetime: et,
        type: this.contralData.type,
        employ_type: 0,
        page_num: this.pageData.currentPage,
        limit_size: this.pageData.pageSize
      }
      getPropertyLogApi(data).then((res) => {
        this.tableData = res.data.data
        this.pageData.total = res.data.total
      })
    },
    changePage(val) {
      this.pageData.currentPage = val.currentPage
      this.pageData.pageSize = val.pageSize
      this.getTableData()
    },
    runTo(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-consume-box {
  width: 100%;
  height: 100%;

  .table-containe {
    width: 100%;
    height: calc(100% - 40px);
    margin-bottom: 10px;
  }
}
</style>
